<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<button id="btn">点击获取数据</button>
<script>
  btn.addEventListener('click', () => {
    let xhr = new XMLHttpRequest();
    // xhr.open('GET', '/', true);
    xhr.open('POST','http://localhost:3000/user', true); //get、post虽然是简单请求，但设置了非规定范围内的自定义请求，故还是会先发送一个options预检请求

    /*xhr.onreadystatechange = function(){ }*/

    xhr.responseType = 'json'; //这个如果置为true了，浏览器拿到服务器返回的json字符串会自动parse成obj，这样就不能获取xhr.responseText了， 因为这货只支持文本返回类型啊！会报错滴！
    xhr.setRequestHeader('token', 'xxx');

    //默认跨域是不允许设置cookie的
    xhr.withCredentials = true;

    //h5↓方法 状态为4 并且成功了 返回的是200
    xhr.onload = function () {
      // console.log(xhr.responseText);
      console.log(xhr.response); //相对于responseText只能放文本，response可以放对象
      //如果服务器返回的json
    };

    xhr.send('a=1&b=2');
  });
</script>
</body>
</html>
